<template>
  <div class="packages">
    <div class="container">
      <!-- aside -->
      <div class="aside">
        <el-button type="primary" @click="reasonAdd" :disabled="btnAdd" size="mini">添加子节点</el-button>
        <el-button type="danger" @click="reasonDel" :disabled="btnDel" size="mini">批量删除</el-button>
        <el-input placeholder="请输入原因名称查询" clearable v-model="filterText">
        </el-input>
        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all
          :filter-node-method="filterNode" ref="tree"></el-tree>
      </div>
      <div class="main">
        <div v-if="tableVisible">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="原因类型" prop="reasonType">
              <el-input v-model="reasonTypeName[form.reasonType]" :disabled="true" />
            </el-form-item>
            <el-form-item label="原因名称" prop="reasonName">
              <el-input v-model="form.reasonName" placeholder="请输入原因名称" />
            </el-form-item>
            <el-form-item label="顺序号" prop="sort">
              <el-input v-model="form.sort" placeholder="请输入顺序号" />
            </el-form-item>
            <el-form-item label="原因内容" prop="content">
              <el-input v-model="form.content" type="textarea" :rows="13" placeholder="请输入原因内容"
                style="margin-left: 5px;" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">{{btnName}}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reasonTemplate, reasonTemplateAdd, reasonTemplateUpdate, reasonTemplateDel } from "@/api/dictionary/systemSetting/reasonTemplate"
import { enumerate } from "@/api/dictionary/systemSetting/enumeration"
export default {
  name: "reasonTemplate",
  data () {
    return {
      filterText: "",
      treeData: [
        {
          label: "作废原因",
          id: 0,
          children: [
          ]
        },
        {
          label: "迟发原因",
          id: 1,
          children: [
          ]
        },
        {
          label: "修改原因",
          id: 2,
          children: [
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      tableVisible: false,
      //填写参数
      form: {
        content: '',
        sort: '',
        reasonName: '',
        reasonType: '',
        status: 1
      },
      btnName: '',
      //控制新增
      btnAdd: true,
      //控制删除
      btnDel: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 999
      },
      enumerationList: [],
      reasonTypeName: {
        0: '作废原因',
        1: '迟发原因',
        2: '修改原因'
      }
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  created () {
    this.getList()
  },
  methods: {
    /** 查询原因模板列表 */
    getList () {
      reasonTemplate(this.queryParams).then(response => {
        this.treeData[0].children = []
        this.treeData[1].children = []
        this.treeData[2].children = []
        response.rows.map((item) => {
          if (item.reasonType === 0) {
            item.label = item.reasonName
            this.treeData[0].children.push(item)
          } else if (item.reasonType === 1) {
            item.label = item.reasonName
            this.treeData[1].children.push(item)
          } else if (item.reasonType === 2) {
            item.label = item.reasonName
            this.treeData[2].children.push(item)
          }
        })
      }
      )
      enumerate().then((response) => {
        this.enumerationList = response.rows
        console.log(this.enumerationList)
      })
    },
    // 树状
    handleNodeClick (data) {
      if (data.children) {
        this.form = {}
        this.form.reasonType = data.id
        this.btnAdd = false
        this.btnDel = true
        this.tableVisible = false
      } else {
        console.log('父')
        this.form = data
        this.btnAdd = true
        this.btnDel = false
        this.tableVisible = true
        this.btnName = '保存'
      }
    },
    //查询
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    //增加原因
    reasonAdd () {
      this.btnName = '新增'
      this.tableVisible = true
      if (this.form.reasonType === 0) {
        this.enumerationList.map((item) => {
          if (item.name === '作废原因') {
            this.form.enumerateId = item.id
          }
        })
      } else if (this.form.reasonType === 1) {
        this.enumerationList.map((item) => {
          if (item.name === '迟发原因') {
            this.form.enumerateId = item.id
          }
        })
      } else if (this.form.reasonType === 2) {
        this.enumerationList.map((item) => {
          if (item.name === '修改原因') {
            this.form.enumerateId = item.id
          }
        })
      }

    },
    //删除节点
    reasonDel () {
      this.$confirm(
        '是否确认删除该原因模板?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(res => {
          return reasonTemplateDel(this.form.id)
        })
        .then(() => {
          this.form = {}
          this.btnDel = true
          this.btnAdd = true
          this.tableVisible = false
          this.getList()
          this.msgSuccess("删除成功")
        })
    },
    /** 提交按钮 */
    submitForm: function () {
      if (this.form.id != undefined) {
        reasonTemplateUpdate(this.form).then(response => {
          this.msgSuccess("保存成功")
          this.form = {}
          this.btnDel = true
          this.btnAdd = true
          this.tableVisible = false
          this.getList()
        })
      } else {
        this.form.status = 1
        reasonTemplateAdd(this.form).then(response => {
          this.msgSuccess("新增成功")
          this.form = {}
          this.btnDel = true
          this.btnAdd = true
          this.tableVisible = false
          this.getList()
        })
      }
    },


  }
}
</script>

<style scoped lang="scss">
.packages {
  position: relative;
  padding: 10px;
  margin-top: 10px;
  background-color: #fff;

  .container {
    border: 1px solid rgb(220, 223, 230);
    border-radius: 4px;
    display: flex;
  }

  .aside {
    overflow-y: auto;
    height:82vh;
    width: 450px;
    border-right: 1px solid rgb(220, 223, 230);
    padding: 15px;
    box-sizing: border-box;
  }

  .main {
    height: 82vh;
    padding: 15px;
    flex: 1;
  }

  .aside2 {
    width: 45%;
    border-right: 1px solid rgb(220, 223, 230);
    padding: 15px;
    box-sizing: border-box;
  }

  .main2 {
    padding: 15px;
    flex: 1;
    border-left: 1px solid rgb(220, 223, 230);
    box-sizing: border-box;
  }

  .middle {
    border: none;
    // line-height: 200%;
  }

  .el-input,
  .el-tree,
  .el-button,
  .el-form-item {
    margin: 5px;
  }

  .vp-title {
    color: #333;
    height: 35px;
    border-bottom: 1px solid #eff1f3;
  }

  .czDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
  }

  .demo-ruleForm {
    .el-form-item {
      margin-bottom: 15px;
    }
  }


}
</style>
